<template>
	<view class="content">
		<view class="form_container">
			<form @submit="formSubmit" @reset="formReset">
				<!-- 用户名 -->
				<view class="username">
					<text>用户名：</text>
					<input type="text" name="userName" value="" placeholder="请输入用户名" />
				</view>
				<!-- 密码 -->
				<view class="userpwd">
					<text>密&nbsp;&nbsp;&nbsp;码：</text>
					<input type="password" name="userPwd" value="" placeholder="请输入密码" />
				</view>
				<!-- 性别 -->
				<view class="usersex">
					<text>性&nbsp;&nbsp;&nbsp;别：</text>
					<radio-group name="radioGroup">
						<label>
							<radio value="male" /><text>男</text>
						</label>
						<label>
							<radio value="female" /><text>女</text>
						</label>
					</radio-group>
				</view>
				<!-- 爱好 -->
				<view class="userhobby">
					<text>爱&nbsp;&nbsp;&nbsp;好：</text>
					<checkbox-group name="checkGroup">
						<label>
							<checkbox value="checkbox1" /><text>看书</text>
						</label>
						<label>
							<checkbox value="checkbox2" /><text>游泳</text>
						</label>
						<label>
							<checkbox value="checkbox3" /><text>爬山</text>
						</label>
						<label>
							<checkbox value="checkbox4" /><text>跑步</text>
						</label>
					</checkbox-group>
				</view>
				<!-- 年龄 -->
				<view class="userage">
					<text>年&nbsp;&nbsp;&nbsp;龄：</text>
					<slider style="width: 80%;" name="slider" min="0" max="100" value="19" 
					show-value="true" active-color="#F00"></slider>
				</view>
				<!-- 自我介绍 -->
				<view class="userintroduce">
					<text>自我介绍:</text>
					<textarea value="" name="textarea" placeholder="请输入自我介绍..." ></textarea>
				</view>
				<!-- 滑动开关 -->
				<view class="userpromt">
					<text>是否接受推荐：</text>
					<switch name="switch"></switch>
				</view>
				<!-- 提交与重置按钮 -->
				<view class="userbtn">
					<button type="primary" form-type="submit">注册</button>
					<button type="primary" form-type="reset">重置</button>
				</view>

			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//获取用户注册的相关信息并且打印在控制台
			formSubmit:function(e){
				console.log("用户的注册信息为:",e)
				var userInfo=e.detail.value
				uni.showModal({
					content:"用户的注册信息为："+JSON.stringify(userInfo),
					showCancel:false
				})
			},
			//一键重置注册信息
			formReset:function(e){
				uni.showToast({
					title:"数据重置成功",
					icon:"success"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		width: 90%;
		height: 1000rpx;
		border: #F00 solid 1rpx;
		margin: 0 auto;

		.form_container {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			padding: 10rpx;

			.username,
			.userpwd,
			.usersex,.userhobby,.userage,.userintroduce {
				display: flex;
				width: 90%;
				flex-direction: row;
				padding: 10rpx;
				input {
					width: 80%;
					height: 40rpx;
					border: #ccc solid 1rpx;
				}
				textarea {
					width: 80%;
					height: 200rpx;
					border: #ccc solid 1rpx;
				}
			}
			.userbtn {
				button {
					width: 90%;
					margin: 10rpx;
				}
			}

		}
	}
</style>